<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>000</title>
        <script>
            window.onload = function () {
                var oDiv = document.getElementById("div1");
                var oImg = document.getElementById("img1");
                
                drag(oDiv);
                drag(oImg);
                
                function drag(obj) {
                    
                    obj.onmousedown = function (ev) {
                    
                        var ev = ev || event;
                        var disX = ev.clientX - this.offsetLeft;  //disX：鼠标点击点距离元素div的左边距离
                        var disY = ev.clientY - this.offsetTop;   //disY：鼠标点击点距离元素div的顶边距离
                    
                        document.onmousemove = function (ev) {        // oDiv.onmousemove = function (ev)移动太快会导致鼠标在div外边跑，现在只需把对象改为document就行了
                            
                            var ev = ev || event;
                            var L = ev.clientX - disX;
                            var T = ev.clientY - disY;
                            
                            
                            var L1 = L;
                            var R1 = L1 + obj.offsetWidth;
                            var T1 = obj.offsetTop;
                            var B1 = T1 + obj.offsetHeight;
                            
                            var L2 = oImg.offsetLeft;
                            var R2 = L2 + oImg.offsetWidth;
                            var T2 = oImg.offsetTop;
                            var B2 = T2 + oImg.offsetHeight;
                            
                            if( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
                                oImg.src = "01.png";
                            }else {
                                oImg.src = "02.jpg";
                            }
                            
                            
                            
                            
                            
                            if( L<100 ) {           //这里本应该是L<0的，但是当L<100时可以让obj在靠近100px时，被吸附到边缘，从而达到磁性吸附的效果；
                                L = 0;
                            }else if( L > document.documentElement.clientWidth -obj.offsetWidth ) {
                                L = document.documentElement.clientWidth -obj.offsetWidth;
                            }
                            
                            if( T <100 ) {         //这里本应该是L<0的，但是当L<100时可以让obj在靠近100px时，被吸附到边缘，从而达到磁性吸附的效果；
                                T = 0;
                            }else if( T > document.documentElement.clientHeight -obj.offsetHeight ) {
                                T = document.documentElement.clientHeight -obj.offsetHeight;
                            }
                            
                            obj.style.left = L + "px";
                            obj.style.top = T + "px";
                        }
                    
                        document.onmouseup = function () {                //oDiv.onmouseup = function ()把对象换为document可以避免div1上面覆盖其他div时不能触发此函数
                            document.onmousemove = document.onmouseup = null;
                        }
                        
                        return false;
                }
                    
                }
                
            }
        </script>
        <style>
            #div1 {
                width:100px;
                height:100px;
                background:red;
                position:absolute;
                cursor:pointer;
                z-index:5;
            }
            #img1 {
                width: 300px;
                height: 150px;
                position: absolute;
                left: 522px;
                top: 225px;
                
            }
            
        </style>
    </head>
    <body>
        <div id="div1"></div>
        <img src="01.png" id="img1"/>
    </body>
</html>